<template>
  <div class="sys-main-content">
    <div class="col-content">
      <div class="sys-search">
        <el-input v-model="searchForm.name" placeholder="请输入脚本名称" clearable/>
        <el-select v-model="searchForm.type" clearable @change="init">
          <el-option label="文件入参" value="0"></el-option>
          <el-option label="普通入参" value="1"></el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" @click="init">查询</el-button>
        <el-button type="primary" @click="addOrUpdate(undefined)">新增</el-button>
      </div>
      <div class="sys-table">
        <el-col :span="4">
          <div style="width: 200px;height:300px;overflow: auto">
            <el-tree
              :expand-on-click-node="false"
              default-expand-all
              id="el-tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" @node-contextmenu="rightClick"></el-tree>
          </div>
        </el-col>
        <el-col :span="20">
          <el-table
            :data="tableData"
          >
            <el-table-column
              show-overflow-tooltip
              label="脚本名称"
              prop="name"
              align="center"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="脚本入参类型"
              prop="type"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag>{{ scope.row.type===0?'文件入参':'普通入参' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="入口函数"
              prop="invokeFunction"
              align="center"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="错误日志"
              prop="errorMsg"
              align="center"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="备注"
              prop="remark"
              align="center"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="创建者"
              prop="createBy"
              align="center"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="最近修改者"
              prop="updateBy"
              align="center"
            >
            </el-table-column>
            <el-table-column
              width="200"
              show-overflow-tooltip
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="openLogDetail(scope.row)" v-if="scope.row.errorMsg">查看日志</el-button>
                <el-button type="text" size="mini" @click="runScript(scope.row)">运行</el-button>
                <el-button type="text" size="mini" @click="addOrUpdate(scope.row)">编辑</el-button>
                <el-button type="text" size="mini" @click="removeGroovy(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </div>
      <div class="sys-pagination">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <add-or-update-script v-if="AddOrUpdateScriptVisible" ref="AddOrUpdateScript"></add-or-update-script>
    <run-script v-if="RunScriptVisible" ref="RunScript"></run-script>
    <add-or-update-category ref="AddOrUpdateCategory" v-if="AddOrUpdateCategoryVisible"></add-or-update-category>
    <log-details ref="LogDetails" v-if="LogDetailsVisible"></log-details>
    <div v-show="menuVisible" @mouseleave="menuVisible=!menuVisible">
      <ul id="menu">
        <li tabindex="-1" class="menu__item" id="menu-4994-1-0">
          <el-link icon="el-icon-edit" :underline="false" @click="updateCategory(nodeData)">修改</el-link>
        </li>
        <li tabindex="-1" class="menu__item" id="menu-4994-1-2">
          <el-link icon="el-icon-plus" :underline="false" @click="appendCategory(nodeData,true)">添加同级</el-link>
        </li>
        <li tabindex="-1" class="menu__item" id="menu-4994-1-2">
          <el-link icon="el-icon-plus" :underline="false" @click="appendCategory(nodeData,false)">添加子级</el-link>
        </li>
        <li tabindex="-1" class="menu__item" id="menu-4994-1-2">
          <el-link icon="el-icon-remove-outline" :underline="false" @click="removeCategory(nodeData)">删除</el-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getTreeList, removeCategory } from '@/api/category'
import { getGroovyList, removeGroovy } from '@/api/groovy'
import AddOrUpdateScript from './addOrUpdateScript'
import RunScript from './runScript'
import AddOrUpdateCategory from './addOrUpdateCategory'
import LogDetails from './logDetails'

export default {
  name: 'GroovyIndex',
  components: { LogDetails, AddOrUpdateCategory, RunScript, AddOrUpdateScript },
  data() {
    return {
      nodeData: {},
      menuVisible: false,
      contextMenuTarget: null,
      contextMenuVisible: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      RunScriptVisible: false,
      AddOrUpdateCategoryVisible: false,
      AddOrUpdateScriptVisible: false,
      LogDetailsVisible: false,
      searchForm: {
        name: '',
        type: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 6,
      totalCount: 0,
      treeData: [],
      menuShow: false
    }
  },
  mounted() {
    this.init()
    this.getTreeList()
  },
  methods: {
    openLogDetail(row) {
      this.LogDetailsVisible = true
      this.$nextTick(() => {
        this.$refs.LogDetails.dialogVisible = true
        this.$refs.LogDetails.errorMsg = row.errorMsg
      })
    },
    rightClick(MouseEvent, object, Node, element) {
      this.nodeData = Node.data
      this.menuVisible = true
      const menu = document.querySelector('#menu')
      menu.style.cssText = 'position: fixed; left: ' + (MouseEvent.clientX - 10) + 'px' + '; top: ' + (MouseEvent.clientY - 25) + 'px; z-index: 999; cursor:pointer;'
    },
    updateCategory(data) {
      this.AddOrUpdateCategoryVisible = true
      this.$nextTick(() => {
        this.$refs.AddOrUpdateCategory.dialogVisible = true
        this.$refs.AddOrUpdateCategory.ruleForm.tableName = data.tableName
        this.$refs.AddOrUpdateCategory.ruleForm.parentId = data.parentId
        this.$refs.AddOrUpdateCategory.ruleForm.id = data.id
        this.$refs.AddOrUpdateCategory.ruleForm.label = data.label
        this.$refs.AddOrUpdateCategory.title = '节点修改'
      })
    },
    appendCategory(data, f) {
      this.AddOrUpdateCategoryVisible = true
      this.$nextTick(() => {
        this.$refs.AddOrUpdateCategory.dialogVisible = true
        this.$refs.AddOrUpdateCategory.ruleForm.tableName = data.tableName
        if (f) {
          this.$refs.AddOrUpdateCategory.ruleForm.parentId = data.parentId
          this.$refs.AddOrUpdateCategory.title = '同级节点新增'
        } else {
          this.$refs.AddOrUpdateCategory.ruleForm.parentId = data.id
          this.$refs.AddOrUpdateCategory.title = '子级节点新增'
        }
      })
    },
    removeCategory(data) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeCategory(data.id).then(() => {
          this.getTreeList()
        })
      })
    },
    handleNodeClick(data) {
      getGroovyList({
        current: this.currentPage,
        size: this.pageSize,
        name: this.searchForm.name,
        type: this.searchForm.type,
        typeId: data.id
      }).then((r) => {
        this.tableData = r.list
        this.totalCount = r.totalCount
      })
    },
    getTreeList() {
      getTreeList('sys_script').then((r) => {
        this.treeData = r
      })
    },
    runScript(row) {
      this.RunScriptVisible = true
      this.$nextTick(() => {
        this.$refs.RunScript.dialogVisible = true
        this.$refs.RunScript.init(row)
      })
    },
    addOrUpdate(row) {
      this.AddOrUpdateScriptVisible = true
      this.$nextTick(() => {
        this.$refs.AddOrUpdateScript.options = this.treeData
        this.$refs.AddOrUpdateScript.dialogVisible = true
        this.$refs.AddOrUpdateScript.init(row)
      })
    },
    removeGroovy(id) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeGroovy(id).then((r) => {
          this.$message.success('操作成功')
          this.init()
        })
      })
    },
    init() {
      getGroovyList({
        current: this.currentPage,
        size: this.pageSize,
        name: this.searchForm.name,
        type: this.searchForm.type
      }).then((r) => {
        this.tableData = r.list
        this.totalCount = r.totalCount
      })
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-row {
    height: calc(100vh - 100px);

    .el-col {
      height: 100%;
    }
  }

  .col-content {
    height: calc(100vh - 100px)
  }

  .menu__item {
    width: 100%;
    display: block;
    line-height: 20px;
    text-align: center;
    margin-top: 10px;
    text-align: center;

  }
</style>
